/*
 * @Description:分析数据组件
 * @Author: kanglin
 * @Date: 2018-09-05 13:50:01
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
 @import "~src/assets/css/common.less";
    .v-com-analysis-data {
        // width: 696*@rem-per-px;
        height: 118*@rem-per-px;
        padding-top: 10 *@rem-per-px;
        ul{
            padding: 8 *@rem-per-px 0;
            text-align: center;
            white-space: nowrap;
        }
        li:nth-child(1) {
            border-right: 1px solid #ffe9f4;
        }
        li:nth-child(2) {
            border-right: 1px solid #ffe9f4;
        }
        li {
            display: inline-block;
            width: 226*@rem-per-px;
            list-style: none;
            & > span {
                font-size: 58*@rem-per-px;
                // font-weight: bold;
                // color: transparent;
                &.moisture {
                    color: #9AD0FC;
                    // -webkit-background-clip: text;
                }
                &.oil {
                    color: #FCD496;
                    // -webkit-background-clip: text;
                }
                &.elastic {
                    color:#FF889D;
                    // -webkit-background-clip: text;
                }
            }
            & > p {
                margin-top: 22*@rem-per-px;
                color: #666666;
                & > i {
                    display: inline-block;
                    width: 34*@rem-per-px;
                    height: 34*@rem-per-px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    vertical-align: text-bottom;
                    &.moisture-img {
                        background-image: url(~src/assets/media/img/user/records/touch/icon_shuifen.png);
                    }
                    &.oil-img {
                        background-image: url(~src/assets/media/img/user/records/touch/icon_youfen.png);
                    }
                    &.elastic-img {
                        background-image: url(~src/assets/media/img/user/records/touch/icon_tanxing.png);
                    }
                }
            }
        }
    }
</style>

<template>
	<div class="v-com-analysis-data">
		<ul>
			<li>
				<span class="moisture">
					{{ moisture + '%' }}
				</span>
				<p>
					<!-- <i class="moisture-img"/>  -->
					{{ $t('report.water') }}
				</p>
			</li>
			<li>
				<span class="oil">
					{{ oil + '%' }}
				</span>
				<p>
					<!-- <i class="oil-img"/>  -->
					{{ $t('report.oil') }}
				</p>
			</li>
			<li>
				<span class="elastic">
					{{ elastic }}
				</span>
				<p>
					<!-- <i class="elastic-img"/>  -->
					{{ $t('report.elastic') }}
				</p>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'AnalysisData',
	props: {
		elastic: {
			type: Number,
			required: true,
		},
		moisture: {
			type: Number,
			required: true,
		},
		oil: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {};
	},
	methods: {},
};
</script>
